html搜索框怎么做

来源:网络整理作者: 发布时间:2020-12-18 09:39

使用HTML做搜索框的方法：1、新建一个div，id名为box，用来包裹搜索框；2、在内部添加一个input标签和一个div标签，...

1、首先新建一个div，id名为box，用来包裹搜索框；

html搜索框怎么做

使用HTML做搜索框的方法：

3、最后使用css为它们设计样式即可。

推荐学习：html教程

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=https://www.ym97.com/""> <meta name="keywords" content=https://www.ym97.com/""> <link href=https://www.ym97.com/"" rel="stylesheet"> <style type="text/css"> #box{ width: 380px; margin: 30px auto; font-family: 'Microsoft YaHei'; font-size: 14px; } input{ width: 260px; border: 1px solid #e2e2e2; height: 30px; float: left; background-image: url(images/search.jpg); background-repeat: no-repeat; background-size: 25px; background-position:5px center; padding:0 0 0 40px; } #search{ width: 78px; height: 32px; float: right; background: black; color: white; text-align: center; line-height: 32px; cursor: pointer; } </style> </head> <body> <div id="box"> <input type="search" name="search" placeholder="请输入关键字"> <div id="search">搜索</div> </div> </body> </html>
效果：
html搜索框怎么做

2、然后在内部添加一个input标签和一个div标签，一个用来输入文字，一个充当按钮；

相关热词： HTML

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/5130.shtml

上一篇：html实现高亮关键字

下一篇：关于html中area标签的用法详

④格式标签粗体：b/b 斜体：	我们直接看代码： !DOCTYPE htm
假设我们的HTML代码如下： ul	我们尝试一下更新一下HTML结构
微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	优化转动的小能力：利用CSS
.plate { position: absolute; top: 50	可以加我的HTML5前端交流群11
我们先来看一下实现效果：	html利用什么来描写网页？
html标签是所有其他HTML元素（	那么子元素也是10px 3、第三种